<template>
	<view class="newbie">
		<view class="bieVideo">
			<view class="video" v-for="(v,i) in videolist" :key="i">
				<view class="videoBox">
					<video :show-center-play-btn="false" :src="v" class="videoBox"></video>
				</view>
				<!-- <video width="160" height="90" src=""></video> -->
			</view>
			
		</view>
		<view class="vtitle">
			<view class="vtiinfo">
				<view class="tmore">新手专区</view>
				<view class="more">
					<view>
						更多
					</view>
					<view class="icobox">
						<u-icon name="arrow-right" color="#858585" size="10"></u-icon>
					</view>
				</view>
				
			</view>
		</view>
		<view class="listitem">
			<view class="item" v-for="(v,i) in list" :key="i">
				<view>
					<img class="img" :src="v.image" alt="">
				</view>
				<view class="minr">
					<view class="lti">{{v.tittle}}</view>
					<view class="lttxt" v-html="v.content">
						
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getrepos,getinfoprams} from "@/pages/api/apihost.js"
	export default{
		name:'newbie',
		data(){
			return{
				list:[],
				videolist:[]
			}
		},
		onShow(){
			this.getlist()
		},
		methods:{
			
			getlist(){
				let params={
					pageSize:1000,
					pageNum:1,
					repositoryClassificationId:1
				}
				getrepos(params).then(r=>{
					console.log(r, 'rrrrrrr123')
					this.list=r
				})
				getinfoprams({id:1}).then(r=>{
					console.log(r, 'rrrr12345567')
					r.videos=r.video.split(',')
					this.videolist=r.videos
				})
			},
		}
		
	}
</script>

<style lang="scss" scoped>
	.newbie{
		min-height: 100vh;
		background-color: #f7f7f7;
	}
	.listitem{
		padding: 30rpx 30rpx 50rpx 30rpx;
		.item{
			background:#fff;
			border-radius: 12rpx;
			display: grid;
			grid-template-columns: 199rpx auto;
			margin-bottom: 24rpx;
			.img{
				width: 199rpx;
				height: 200rpx;
				display: block;
				border-radius: 24rpx;
			}
			.minr{
				padding: 22rpx;
				.lti{
					height: 40rpx;
					font-size:40rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 40rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					line-clamp: 2;
					-webkit-box-orient: vertical;
					box-orient: vertical;
				}
				.lttxt{
					font-size: 28rpx;
					padding-top: 15rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 40rpx;
				}
			}
		}
	}
	.vtitle{
		padding: 60rpx 30rpx 0rpx 30rpx;
		.tmore{
			height: 40rpx;
			font-size: 40rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #333333;
			line-height: 40rpx;
		}
		.more{
			height: 28rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #858585;
			vertical-align: middle;
			display: flex;
			line-height: 40rpx;
		}
		.vtiinfo{
			display: flex;
			justify-content: space-between;
		}
		.icobox{
			padding-top: 11rpx;
		}
	}
	.bieVideo{
		display: grid;
		grid-template-columns: 333rpx 333rpx;
		grid-gap: 24rpx 24rpx;
		padding: 30rpx 30rpx 0rpx 30rpx;
		.videoBox{
			width: 333rpx;
			height: 188rpx;
			border-radius: 24rpx;
			overflow: hidden;
		}
	}
</style>